<template>
  <div>
      <h1>当前求和为：{{he}}</h1>
      <h2>和放大10倍为：{{tenSum}}</h2>
      <h2>我在{{xuexiao}},学习{{xueke}}</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前求和为奇数再加</button>
      <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:'Count',
    data(){
        return{
            n:1 ,//用户选择的数字
        }
    },
    computed:{
        //由mapState({he:'sum',xuexiao:'school',xueke:'subject'})代替
        // sum(){
        //     return this.$store.state.sum
        // },
        // school(){
        //     return this.$store.state.school
        // },
        // subject(){
        //     return this.$store.state.subject
        // },
        //由mapGetters({tenSum:'bigSum'})代替
        // bigSum(){
        //     return this.$store.getters.bigSum
        // }
        //借助mapState生成计算属性，从state中获取数据
        ...mapState(['sum','school','subject']),

        //借助mapgetters生成计算属性，从getter中读取数据(对象写法)
        //...mapGetters({bigSum:'bigSum'})
        //借助mapgetters生成计算属性，从getter中读取数据(数组写法)
        ...mapGetters(['bigSum'])
    },
    methods:{
        // increment(){
        //     this.$store.commit('jia',this.n)
        // },
        // decrement(){
        //     this.$store.commit('jian',this.n)
        // },
        
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({increment:'jia',decrement:'jian'}),
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
        // ...mapMutations(['increment','decrement']),

        // incrementOdd(){
        //     if(this.$store.state.sum % 2){
        //         this.$store.dispatch('jia',this.n)
        //     }
        // },
        // incrementWait(){
        //     setTimeout(()=>{
        //         this.$store.dispatch('jia',this.n)
        //     },3000)
        // }
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
        // ...mapActions(['jiaOdd','jiaWait'])
    },
    mounted(){
        mapState({he:'sum',xuexiao:'school',xueke:'subject'})
        mapGetters({tenSum:'bigSum'})
    }
}
</script>

<style scoped>
    button{
        margin-left: 5px;
    }
</style>